<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="saveClick('ruleForm')">保存</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="eidt-el-form el-form-wrap"
          >
            <div class="line-box">
              <el-form-item label="注册类型" prop="type">
                <el-select
                  placeholder="注册类型："
                  clearable
                  @change="getChageType"
                  v-model="ruleForm.type"
                  class="el-input-position"
                >
                  <el-option  v-for="(item,index) in types" :key="index" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册状态：">
                <el-radio-group v-model="ruleForm.disabled" @change="getChageRadio">
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否审核：">
                <el-radio-group v-model="ruleForm.verify" @change="getVerifyRadio">
                  <el-radio :label="0">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item label="标题名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="英文注册：">
                <el-radio-group v-model="ruleForm.english" @change="getEnglishRadio">
                  <el-radio :label="0">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="微信登记：">
                <el-radio-group v-model="ruleForm.wechat" @change="getWechatRadio">
                  <el-radio :label="0">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item label="邮件通知内容" prop="email">
                <el-input v-model="ruleForm.email" type="textarea" rows="4"></el-input>
              </el-form-item>
              <el-form-item label="短信通知内容" prop="sms">
                <el-input v-model="ruleForm.sms" type="textarea" rows="4"></el-input>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item v-show="ruleForm.english==1" label="英文名称" prop="englishName">
                <el-input v-model="ruleForm.englishName"></el-input>
              </el-form-item>
              <el-form-item  prop="banner">
                  <UploadImg @uploadImg="getUploadImg" :editImg="editImg" :imgTitle="imgTitle"></UploadImg>
              </el-form-item>
              <el-form-item prop="bannerMoblie">
                  <UploadImg @uploadImg="getUploadImg1" :editImg="editImg1" :imgTitle="imgTitle1"></UploadImg>
              </el-form-item>
            </div>
          </el-form>
          <el-divider content-position="left">注册属性</el-divider>
            <el-form ref="tableData" :model="list" :rules="rules1"  class="demo-ruleForm">
            <el-button style="float:right;margin-left:10px" type="primary" @click="save">保存属性</el-button>
            <el-button style="float:right;margin-left:10px" type="primary" plain @click="addRow">新增属性</el-button>
            <el-table :data="list.tableData" style="width: 100%;margin-bottom:30px;z-index:1" >
            <el-table-column label="类型" width="150">
              <template slot-scope="scope" >
                <el-form-item  :prop="'tableData.'+scope.$index+'.type'" :rules="rules1.type">
                  <el-select
                    placeholder="属性类型"
                    clearable
                    @change="selectChange"
                    v-model="scope.row.type"
                    class="el-input-position"
                  >
                    <el-option v-for="(item,index) in inputTypes" :key="index" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="100" label="排序">
              <template slot-scope="scope"  prop="indexNo">
                <el-form-item  :prop="'tableData.'+scope.$index+'.indexNo'" :rules="rules1.indexNo">
                <el-input
                  v-model="scope.row.indexNo"
                  style="width:65px"
                  type="number"
                  min="1"
                  minlength="1" 
                  maxlength="2"
                  @change="indexChange()"
                  max="99"
                  class="el-input"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="必填"  width="150">
              <template slot-scope="scope" prop="required">
                <el-form-item v-show="scope.row.type>=0" :prop="'tableData.'+scope.$index+'.required'" :rules="rules1.required">
                <el-radio-group v-show="scope.row.type>=0" v-model="scope.row.required">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="key" width="200">
              <template slot-scope="scope" prop="input">
                <el-form-item v-show="scope.row.type>=0" :prop="'tableData.'+scope.$index+'.name'" :rules="rules1.input">
                <el-autocomplete
                  v-show="scope.row.type>=0"
                  v-model="scope.row.input"
                  clearable
                  @select="((item)=>{handleSelect(item,scope.$index)})"     
                  :fetch-suggestions="querySearch"
                  placeholder="属性 key 请填写英文"
                  class="el-input-position"
                  popper-class="my-autocomplete"
                >
                <i class="el-icon-edit el-input__icon" slot="suffix" ></i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.name }}</span>
                </template>
              </el-autocomplete>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="名称" width="200">
              <template slot-scope="scope"  prop="name">
                <el-form-item v-show="scope.row.type>=0" :prop="'tableData.'+scope.$index+'.name'" :rules="rules1.name">
                <el-input
                  v-show="scope.row.type>=0"
                  v-model="scope.row.name"
                  :type="scope.row.type==0?'textarea':'text'"
                  clearable
                  placeholder="中文名"
                  class="el-input-position"
                ></el-input>
                </el-form-item>
                <el-form-item v-show="scope.row.type>=0&&ruleForm.english==1" :prop="'tableData.'+scope.$index+'.englishName'" :rules="rules1.englishName">
                <el-input v-show="scope.row.type>=0&&ruleForm.english==1"
                  v-model="scope.row.englishName"
                  placeholder="英文名"
                  clearable
                  :type="scope.row.type==0?'textarea':'text'"
                  class="el-input-position"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="选项">
              <template slot-scope="scope" prop="options">
                <el-form-item v-show="scope.row.type>=0&&(scope.row.type=='2'||scope.row.type=='4'||scope.row.type=='0')" :prop="'tableData.'+scope.$index+'.options'" :rules="rules1.option">
                <el-input
                  v-show="scope.row.type>=0&&(scope.row.type=='2'||scope.row.type=='4'||scope.row.type=='0')"
                  v-model="scope.row.options"
                  type="textarea"
                  clearable
                  class="el-input-position"
                  placeholder="中文选项：根据|分割选项"
                ></el-input>
                </el-form-item>
                <el-form-item v-show="scope.row.type>=0&&(scope.row.type=='2'||scope.row.type=='4'||scope.row.type=='0')" :prop="'tableData.'+scope.$index+'.englishOption'" :rules="rules1.englishOption">
                <el-input v-show="scope.row.type>=0&&ruleForm.english==1&&(scope.row.type=='2'||scope.row.type=='4'||scope.row.type=='0')"
                  v-model="scope.row.englishOption"
                  type="textarea"
                  placeholder="英文选项：根据|分割选项"
                  clearable
                  class="el-input-position"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="150" label="操作">
              <template slot-scope="scope">
                  <el-button type="danger" plain @click="deleterow(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column width="10"></el-table-column>
          </el-table>
            </el-form>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>

function  sortBy (props) {
  return function(a,b) {
    return a[props] - b[props];
  }
}
function filterOne(dataList, value,type) {
  var s = dataList.filter(function(item, index, arr) {
    for (let j = 0; j < type.length; j++) {
      if (item[type[j]] != undefined || item[type[j]] != null) {
        if (item[type[j]].indexOf(value) >= 0) {
          return item;
        }
      }
    }
  });
  return s;
}
var inputTypes=[
    {name:"长标题-多选",value:"0"},
    {name:"文本框" ,value:"1"},
    {name:"单选框" ,value:"2"},
    {name:"文本域" ,value:"3"},
    {name:"多选框" ,value:"4"},
    {name:"电子邮箱",value:"5"},
    {name:"日期框",value:"6"},
    {name:"时间框", value:"7"},
    {name:"数字框", value:"8"},
    {name:"电话框", value:"9"},
    {name:"验证码", value:"10"},
    {name:"地区", value:"11"},
    {name:"性别", value:"12"},
    {name:"上传头像", value:"13"},
    {name:"分页-下一步", value:"-1"},
    {name:"提交", value:"-2"}
];

var types=[
    {name:"组委会",value:"1"},
    {name:"展商",value:"2"},
    {name:"展团/代表团",value:"3"},
    {name:"观众" ,value:"4"},
    {name:"媒体", value:"5"},
    {name:"嘉宾" ,value:"6"},
    {name:"搭建商" ,value:"7"},
    {name:"服务商" ,value:"8"},
    {name:"撤展人员" ,value:"9"},
    {name:"兼职/志愿者/外协" ,value:"10"},
    {name:"会议/论坛/活动" ,value:"11"},
    {name:"其他" ,value:"12"}
  ];

  var array= [
    {value:'phone',name:'手机号码',type:'9'},
    {value:'name',name:'名称',type:'1'},
    {value:'avatar',name:'上传头像',type:'13'},
    {value:'IDCard',name:'身份证号',type:'1'},
    {value:'verifycode',name:'验证码',type:'10'},
    {value:'company',name:'公司',type:'1'},
    {value:'position',name:'职务',type:'1'},
    {value:'area',name:'地区',type:'11'},
    {value:'address',name:'地址',type:'3'},
    {value:'email',name:'电子邮箱',type:'5'},
    {value:'sex',name:'性别',type:'12'}
  ];
  

import UploadImg from "../public/UploadImg";

export default {
  name: "editvihicel",
  data() {
    return {
      rules: {
        englishName: [{ required: false, message: "名称不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        banner: [{ required: false, message: "头部不能为空", trigger: "blur" }],
        bannerMobile: [{ required: false, message: "头部不能为空", trigger: "blur" }]
      },
      rules1: {
        input: [{ required: false, message: "属性key不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        name: [{ required: false, message: "名称不能为空", trigger: "blur" }],
        indexNo: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        options: [{ required: false, message: "选项不能为空", trigger: "blur" }],
        englishOption: [{ required: false, message: "英文选项不能为空", trigger: "blur" }],
        englishName: [{ required: false, message: "英文名称不能为空", trigger: "blur" }]
      },
      inputTypes:inputTypes,
      types:types,
      ruleForm: {
        lang:"",
        name: "",
        englishName: "",
        sms: "",
        email: "",
        url: "",
        banner: "",
        bannerMoblie: "",
        disabled: 0,
        english: 0,
        wechat: 0,
        verify: 0,
        type:"1",
        projectId: localStorage.getItem("project_Id")
      },
      register_Id: "",
      editImg: "",
      editImg1:"",
      imgTitle: "上传电脑端头部图片",
      imgTitle1: "上传移动端头部图片",
      list:{ 
        tableData:[{
          indexNo:1,
          propertyId:0,
          name:"手机号码",
          input:"phone",
          englishName:"phone",
          englishOption:"",
          type:"1",        
          required:0,
          options:""
      }]}
    };
  },
  created(){
    
  },
  props: {
    editShow: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      if(this.editData){
      this.ruleForm = this.editData;
      this.ruleForm.type=this.editData.type.toString();
      this.register_Id = this.editData.registerId;
      this.editImg = this.editData.banner;
      this.editImg1=this.editData.bannerMoblie;      
      this.$axios.get("/Property/register/"+this.editData.registerId).then(res => {
        if (res.data.hasError == false) {
          this.list.tableData = [...res.data.data];
          for(var i=0;i<this.list.tableData.length;i++){
            this.list.tableData[i].type=this.list.tableData[i].type.toString();
          }
        }
      });
      }
    }
  },
  methods: {
    handleSelect(item, filed){
      this.list.tableData[filed].name=item.name;
      this.list.tableData[filed].englishName=item.value;
      this.list.tableData[filed].type=item.type;
    },
    querySearch(queryString, cb){
      cb(filterOne(array,queryString,['value']));
    },
    save(){
      this.$refs.tableData.validate(valid => {
      var list=new Array();
      var list1=new Array();
        for(var i=0;i<this.list.tableData.length;i++) {
          if(this.list.tableData[i].input!=null&&this.list.tableData[i].input!=''){
            if(list.includes(this.list.tableData[i].input)){
              this.$message.error(this.list.tableData[i].input+",不能重复使用")
              valid= false;
              break;
            }else{
              if('personalid,projectid,registerid,exhibitorid,openId,type,verify,issign,ispassage,createdate,signdate,passagedate,disabled,code'.
                indexOf(this.list.tableData[i].input.toLowerCase())>0){
                  this.$message.error(this.list.tableData[i].input+"为系统已使用关键词，不能重复使用")
                  valid= false;
                  break;
              }
            }
            list.push(this.list.tableData[i].input)
          }else{
            list1.push(this.list.tableData[i].type)
          }
        }
        if(!list1.includes('-2')){
          valid=false;
          this.$message.error("表单没有提交按钮")
        }
        if (valid) {
          if (this.register_Id == "" || this.register_Id == undefined) {
            this.$message.error("请先保存注册信息");
          }else if(this.list.tableData==null||this.list.tableData.length==0){
            this.$message.error("请添加属性");
          } else {
            this.$axios.put("/Property/" + this.register_Id + "", this.list.tableData).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("编辑成功！");
                this.goBack();
              } else {
                this.$message.error("编辑失败！");
              }
            });
          }
        }
      })
    },
    saveClick(ruleForm) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.register_Id == "" || this.register_Id == undefined) {
            this.$axios.post("/Register/", this.ruleForm).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("保存成功！");
                this.register_Id=res.data.data.registerId;
              } else {
                this.$message.error("保存失败！");
              }
            });
          } else {
            this.$axios
              .put("/Register/" + this.register_Id + "", this.ruleForm)
              .then(res => {
                if (res.data.hasError == false) {
                  this.$message.success("编辑成功！");
                  this.goBack();
                } else {
                  this.$message.error("编辑失败！");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    indexChange(){     
      this.list.tableData.sort(sortBy("indexNo"))     
    },
    addRow() {
      var list = {
        name: "",
        input:"",
        required:0,
        type: "1",
        indexNo: this.list.tableData.length+1,
        option:"",
        englishOption:"",
        englishname:"",
      };
      this.list.tableData.push(list);
    },
    deleterow(index, row) {
      this.list.tableData.splice(index, 1);
      for(var i=0;i<this.list.tableData.length;i++){
        this.list.tableData[index].indexNo=i+1;
      }
    },
    goBack() {
      this.$emit("backFunStu");
      this.register_Id = "";
      this.$refs.ruleForm.resetFields();
      this.editImg= "";
      this.editImg1="";
      this.list.tableData=[];
    },
    selectChange(val){
    },
    getChageRadio(value) {
      this.ruleForm.disabled = value;
    },
    getChageType(val){
      this.ruleForm.lang=this.types[val-1].name;
    },
    getWechatRadio(value) {
      this.ruleForm.wechat = value;
    },
    getVerifyRadio(value) {
      this.ruleForm.verify = value;
    },
    getEnglishRadio(value) {
      this.ruleForm.english = value;
      if(value==1){
        rules.englishName.required=true;
        rules1.englishName.required=true;
        //rules1.englishOption.required=true;
      }else{
        rules.englishName.required=false;
        rules1.englishName.required=false;
        //rules1.englishOption.required=false;
      }
    },
    getUploadImg(imgSrc) {
      this.ruleForm.banner = imgSrc;
    },
    getUploadImg1(imgSrc) {
      this.ruleForm.bannerMoblie = imgSrc;
    }
  },
  components: {
    UploadImg
  }
};
</script>

<style lang="scss" scoped>
.el-form-wrap {
  width: 100% !important;
}
.line-box {
  display: flex;
  flex: 1;
}
.line-box .el-form-item,
.line-box .up-img {
  width: 40% !important;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>